<template>
	<view class="main">
		<u-navbar
		          title="医院主页"
		          :autoBack="true"
		      >
		      </u-navbar>
		<view class="box" v-if="showEmp">
			<view class="blue">
				&nbsp;
			</view>
			<view class="card">
				<view class="card_title">
					<view class="card_title_left" v-if="hosInfo.plat_hospital_name">
						{{hosInfo.plat_hospital_name}}
					</view>
					<view class="card_title_right focus" v-if="focus == true" @click="subscription()">
						已关注
					</view>
					<view class="card_title_right " v-if="focus == false" @click="subscription()">
						+&nbsp;关注
					</view>
				</view>
				<view class="card_content" v-if="hosInfo">
					<view class="card_content_left">
						<view class="card_img">
							<!-- 	<u--image :showLoading="true" :src="log_pic" shape="circle" width="45px"
								height="45px"></u--image> -->
							<u-avatar :src="hosInfo.logo" size="45" shape="circle" :default-url="log_pic"></u-avatar>
						</view>
						<view class="card_text">
							<view class="card_text_box">
								<view class="card_text_brand" v-if="hosInfo.hospital_level">
									{{hosInfo.hospital_level}}
								</view>
								<view class="card_text_hosp card_shrink" v-if="hosInfo.hospital_type">
									{{hosInfo.hospital_type}}
								</view>
								<view class="card_text_hosp" v-if="hosInfo.area">{{hosInfo.area}}</view>
							</view>
							<view class="card_icon">
								<view class="card_icon_text" v-for="(v,k) in hosInfo.label" :key="k">
									{{v}}
								</view>
							</view>
						</view>
					</view>
					<view class="card_content_right" @click="goInfo()">
						医院概况&nbsp;>
					</view>
					<!-- <view v-if="showEmp">
						<view class="card_swiper" @click="goAddress()" v-if="hasFenyuan !== 0">
							切换院区
						</view>
					</view> -->
				</view>
				<view class="bottom_address" v-if="showEmp">
					<view class="bottom_address_box" @click="goAddress()" v-if="hasFenyuan !== 0">
						<view class="other">
							其他院区
						</view>
						<view class="arrow_right">
							<u-icon name="arrow-right" color="#4581F6" size="16"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="search_text">
				<u-search placeholder="请搜索疾病、医生、科室" :showAction="false" bgColor="#fff" v-model="keyword"></u-search>
			</view>
			<view class="nav">
				<u-tabs :list="navOne" @click="navSelect"></u-tabs>
			</view> -->
			<view class="nav_second">
				<view class="nav_second_left" @click="pop('guide')">
					院内指南
				</view>
				<view class="nav_second_line">
					|
				</view>
				<view class="nav_second_right" @click="pop('rule')">
					预约规则
				</view>
			</view>
			<view class="list">
				<view class="left">
					<scroll-view scroll-y="true" class="scroll_h" v-if="hosp.length !== 0">
						<view class="city">
							<view class="city_item" v-for="v in hosp"
								:class="{'city_active' : currentHosp == v.departmentId }" @click="selectHosp(v)">
								{{v.dept_name}}
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="right">
					<view v-show="currentHosp == '热门医生' ">
						<hosp-details-hot-doc></hosp-details-hot-doc>
					</view>
					<view v-show="currentHosp !== '热门医生'">
						<hosp-details-hot-dep></hosp-details-hot-dep>
					</view>
				</view>
			</view>
		</view>
		<view class="pop">
			<u-popup :show="noticePop" :title="noticeTitle">
				<view class="btn_close" @click="noticePop = false">
					<u-icon name="close-circle" size="26"></u-icon>
				</view>
				<view class="slot-content">
					<rich-text :nodes="noticeDetails"></rich-text>
				</view>
				<view>
					<u-empty mode="data" iconSize="80" textSize="18" :icon="emptyList" text="暂无预约规则"
						v-if="noticeDetails == ''"></u-empty>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		getHospitalInfo,
		getHospitalBigDepartments,
		getHospitalBranchs,
		getChildDepartments,
		UserSubscribe,
		IsUserSubscribe,
		UserUnSubscribe
	} from '@/api/home/search.js'
	import homeApii from '@/api/homee'
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				log_pic: require('@/static/icons/defalut_hosp.png'),
				focus: false,
				docSrc: '',
				avatar: '', //头像
				keyword: '', //搜索框
				navOne: [{
					'name': '主页'
				}, {
					'name': '挂号'
				}, ],
				currentHosp: '',
				hosp: [],
				hasFenyuan: 0, //是否有分院 
				hosInfo: {},
				noticePop: false,
				noticeDetails: '', //内容 //医院公告详情
				emptyList: require('@/static/icons/empty_list.png'), //空列表
				showEmp: false,
				// listEmp : false
			};
		},
		async onLoad(params) {
			let token = uni.getStorageSync("token")
			if (!token) {
			await this.getToken()
			}
			if (params.id !== undefined) {
				this.$store.state.doc.currentHosp.hospitalId = params.id
				// this.$store.state.doc.currentHosp.hospitalId ="1597528789083230208"
				
			}
			await this.myInit()
			if (this.hosInfo.status == 2) {
				this.noticeDetails = this.hosInfo.extra_notice
				this.noticePop = true
			}
			//console.log(params.id,'id');
		},
		onShareAppMessage() {
			return {
				title: this.hosInfo.hospital_name || '', // 标题
				desc: this.hosInfo.hospital_name || '', // 描述
				path: `pages/sousuo/search_hosp_details/index?id=${this.$store.state.doc.currentHosp.hospitalId}`, // 分享的小程序页面
				success(res) {
					console.log('success', res);
				},
				fail(res) {
					console.log('fail', res)
				}
			}
		},
		methods: {
			//...mapMutations(['GETTOKEN']),
			async myInit() {
				await this.getHos(this.$store.state.doc.currentHosp.hospitalId) //医院详情
				await this.addressList(this.$store.state.doc.currentHosp.hospitalId) //分院
				await this.isFollow()
				// my.setNavigationBar({
				// 	title: this.hosInfo.hospital_name || '',
				// 	frontColor: '#ffffff',
				// 	backgroundColor: '#4581F6',
				// })
				await this.getNavList()
				if (this.hosp.length > 0) {
					this.selectHosp(this.hosp[0])
				}
				//this.currentHosp =.dept_name
			},
			getToken() {
				// return new Promise((resolve, reject) => {
				// 	my.getAuthCode({
				// 		scopes: 'auth_base',
				// 		success: res => {
				// 			const authCode = res.authCode;
				// 			homeApii.getopenid({
				// 				code: authCode
				// 			}).then(res => {
				// 				//console.log(res,'storeToken')
				// 				if (res.code == 4000) {
				// 					uni.setStorageSync("token", res.data.token)
				// 					this.$store.state.doc.token = res.data.token
				// 				}
				// 				resolve(true)
				// 			})
				// 		},
				// 		fail: err => {
				// 			console.log('my.getAuthCode 调用失败storeToken', err)
				// 		}
				// 	});
				// })
			},
			navSelect(item) { //主页和挂号，1.0不做
				//console.log('item', item);
			},
			selectHosp(params) {
				this.currentHosp = params.departmentId
				//console.log(params);
				//在此判断是否是热门医生科室，然后赋值
				if (this.currentHosp == '热门医生') {
					//热门医生


				} else {
					//热门科室和其他
					this.getItemList(params.departmentId)

				}
				//console.log(hosp);
			},
			pop(type) {
				if (type == 'guide') {
					//院内指南
					// uni.navigateTo({
					// 	url: `/pages/sousuo/search_hosp_details/info`
					// })
					uni.navigateTo({
						url: `/pages/sousuo/hosp_address/pop?type=${type}`
					})
				}
				if (type == 'rule') {
					//预约规则
					uni.navigateTo({
						url: `/pages/sousuo/hosp_address/pop?type=${type}`
					})
				}
			},
			goAddress() {
				uni.navigateTo({
					url: `/pages/sousuo/hosp_address/index`
				})
			},
			goInfo() {
				uni.navigateTo({
					url: `/pages/sousuo/search_hosp_details/info`
					//url: `/pages/sousuo/search_hosp_details/tinfo`
				})
			},
			//判断是否关注
			async isFollow() {
				let data = {
					contentId: this.$store.state.doc.currentHosp.hospitalId //用户关注的内容id
				}
				let res = await IsUserSubscribe(data)
				if (res.data.flag) {
					this.focus = true
				} else {
					this.focus = false
				}
			},
			//点击关注
			async subscription() {
				//this.focus = !this.focus
				//是否关注
				await this.isFollow()
				//没有关注的点击后进行关注，已关注的点击后取消关注
				if (this.focus) {
					let param = {
						id: this.$store.state.doc.currentHosp.hospitalId //用户关注的内容id
					}
					let focus = await UserUnSubscribe(param)
					this.focus = false
					uni.$u.toast('已取消关注')
					return
				}
				if (!this.focus) {
					let params = {
						contentId: this.$store.state.doc.currentHosp.hospitalId, //用户关注的内容id
						content: this.hosInfo.hospital_name, //关注的内容
						contentType: 1, //内容类型 0：未知 1:医院 2:科室 3:专家 4:疾病 5:文章
					}
					let focus = await UserSubscribe(params)
					this.focus = true
					uni.$u.toast('已关注')
				}
			},
			async getHos(id) {
				this.$store.state.doc.hospDetailsInfo = '' //医院详情
				this.$store.state.doc.book_rules = '' //院内详情
				this.$store.state.doc.treat_navigation = '' //预约规则
				this.hasFenyuan = null //是否有分院
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.showEmp = false
				let res = await getHospitalInfo(id)
				this.showEmp = true
				uni.hideLoading()
				if (res.code == 4001) {
					uni.reLaunch({
						url: '/pages/sousuo/no_found/no_found'
					})
					return
				}
				//console.log(res,'res');
				this.$store.state.doc.hospDetailsInfo = res.data?.detail //医院详情
				this.$store.state.doc.book_rules = res.data?.book_rules //院内详情
				this.$store.state.doc.treat_navigation = res.data?.treat_navigation //预约规则
				this.$store.state.doc.busAddress = res.data.address
				//console.log(this.$store.state.doc.busAddress  , res.data.address,'sdfsdf');
				this.hasFenyuan = res.data?.is_main_hospital //是否有分院
				//console.log(this.hasFenyuan,res.data.is_main_hospital);
				this.hosInfo = res.data
			},
			async addressList(id) {
				this.$store.state.doc.DepItemList = []
				let res = await getHospitalBranchs(id)
				console.log(res);
				this.$store.state.doc.addList = res.data
				if (res.data?.main == null) {
					this.hasFenyuan = 0
				}
				//console.log(this.$store.state.doc.addList,this.hasFenyuan);
			},
			async getNavList() {
				this.hosp = []
				//this.listEmp = false
				let res = await getHospitalBigDepartments(this.$store.state.doc.currentHosp.hospitalId)
				//this.listEmp = true
				this.hosp = res.data
				//console.log(res);
			},
			async getItemList(id) {
				this.$store.state.doc.DepItemList = []
				this.$store.state.doc.hosFrozen = false
				let res = await getChildDepartments(id)
				this.$store.state.doc.hosFrozen = true
				this.$store.state.doc.DepItemList = res.data
				//console.log(this.$store.state.doc.DepItemList);
			}
		},
		mounted() {

		},
		computed: {
			// hasFenyuan(){
			// 	if(this.$store.state.doc.addList.data.main.is_main_hospital !== 0){
			// 		return true
			// 	}
			// 	return false
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background: #F5F6F8;
		overflow: hidden;
		padding-top: 180rpx;

		.box {
			.blue {
				width: 100%;
				height: 80rpx;
				background-color: #4581F6;
			}

			.card {
				margin-top: -40rpx;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 0 30rpx 0 30rpx;
				position: relative;

				.card_title {
					padding-top: 60rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.card_title_left {
						font-size: 28rpx;
						font-weight: 600;
						color: #000000;
						line-height: 40rpx;
					}

					.card_title_right {
						flex-shrink: 0;
						background: #EAEFFF;
						border-radius: 16rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: #3F80FF;
						padding: 10rpx 12rpx;
						text-align: center;
						//	line-height: 40px;
					}

					.focus {
						background-color: #f7f7f7;
						color: #888;
					}
				}

				.card_content {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					padding-bottom: 40rpx;

					.card_content_left {
						display: flex;
						align-items: center;

						.card_img {
							padding-right: 20rpx;
						}

						.card_text {
							display: flex;
							flex-direction: column;

							.card_text_box {
								margin-top: 6rpx;
								display: flex;
								align-items: center;

								.card_text_brand {
									background: #FBF1EF;
									border-radius: 4rpx;
									border: 1px solid #E16740;
									font-size: 22rpx;
									font-weight: 400;
									color: #E16740;
									height: 28rpx;
									padding: 8rpx 8rpx 0 8rpx;
									line-height: 20rpx;
									margin-right: 10rpx;
									flex-shrink: 0;
								}

								.card_text_hosp {
									font-size: 24rpx;
									font-weight: 400;
									color: #999999;
									line-height: 32rpx;
									margin-left: 20rpx;
								}

								.card_shrink {
									flex-shrink: 0;
								}
							}

							.card_icon {
								margin-top: 16rpx;
								display: flex;
								align-items: center;
								// justify-content: center;	
								flex-wrap: wrap;
								width: 442rpx;

								.card_icon_text {
									font-size: 22rpx;
									font-weight: 400;
									color: #0F91F7;
									line-height: 24rpx;
									background: #EFF7FF;
									border-radius: 4rpx;
									margin-right: 10rpx;
									margin-top: 16rpx;
									padding: 6rpx 10rpx;
								}
							}

						}
					}

					.card_content_right {
						font-size: 22rpx;
						font-weight: 400;
						color: #333333;
						line-height: 24rpx;
						flex-shrink: 0;
					}
				}

				.card_swiper {
					position: absolute;
					top: 0;
					left: 0;
					width: 130rpx;
					height: 40rpx;
					background: #FD6844;
					border-radius: 20rpx 0px 20rpx 0px;
					text-align: center;
					font-size: 20rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 40rpx;
				}

				.bottom_address {
					padding: 0 30rpx 20rpx 30rpx;

					.bottom_address_box {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 14px;
						font-weight: 400;
						color: #4581F6;
						background: #F5F6F8;

						.other {
							padding: 18rpx 0 18rpx 28rpx;
						}

						.arrow_right {
							padding-right: 36rpx;
						}
					}


				}
			}

			.search_text {
				margin: 20rpx 30rpx;
			}

			.nav {
				background-color: #fff;
				margin: 0 30rpx;
				padding: 0 30rpx;
			}

			.nav_second {
				margin: 20rpx 30rpx;
				display: flex;
				font-size: 24rpx;
				font-weight: 400;
				color: #3D3D3D;
				line-height: 34rpx;

				.nav_second_left {}

				.nav_second_line {
					margin: 0 10rpx;
				}

				.nav_second_right {}
			}

			.list {
				display: flex;
				// height:90vh ;
				margin: 0 30rpx;

				.left {
					.scroll_h {
						height: 920rpx;
					}

					.city {
						display: flex;
						flex-direction: column;
						flex-wrap: nowrap;
						width: 210rpx;
						background: #FFFFFF;
						padding-bottom: 20rpx;

						.city_item {
							font-size: 28rpx;
							font-weight: 400;
							line-height: 40rpx;
							//width: 266rpx;
							padding: 20rpx 0 16rpx 44rpx;
						}

						.city_active {
							color: #4581F6;
						}
					}
				}

				.right {
					background-color: #F5F6F8;
					width: 100%;
					margin-left: 28rpx;
					//margin-right: 30rpx;

				}
			}
		}

		.pop {
			.btn_close {
				display: flex;
				justify-content: flex-end;
				margin: 15rpx 20rpx 0 0;
			}

			.slot-content {
				padding: 0 30rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #3D3D3D;
				line-height: 40rpx;
				text-align: justify;
			}
		}
	}
</style>